<template>
    <div>
         <div style="">
             <PermissionLayer :show="showPermissionLayer" />
        </div>
        <div style="width: 100%;">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="用户管理" name="first">
                    <div style="display: flex;">
                        <el-input placeholder="请输入内容" v-model="input" clearable style="width: 18%;" id="seainp"></el-input>
                        <button style="width: 50px; height: 30px; margin-left: 10px; margin-top: 5px; text-align: center;padding: 0px;"
                            @click="search()">搜索</button>
                            <button style="width: 50px; height: 30px; margin-top: 5px; margin-left: 5px; text-align: center;padding: 0px;" @click="del()">重置</button>
                            <el-button type="primary" plain class="add-btn" @click="dialogTableVisible()" round
                            style="margin-left: 65%;">+ 添加成员</el-button>
                    </div>
                    <el-table :data="newtable" style="width: 100%;" :row-class-name="tableRowClassName" stripe="true">
                        <el-table-column type="selection" fixed="left" :selectable="checkSelectable" />
                        <el-table-column prop="customerId" sortable label="编号" width="150">
                        </el-table-column>
                        <el-table-column prop="fileName" label="姓名" width="150">
                        </el-table-column>
                        <el-table-column prop="status" label="状态" width="150">
                        </el-table-column>
                        <el-table-column prop="department" label="部门" width="150">
                        </el-table-column>
                        <el-table-column prop="entryTime" label="入职时间" width="150">
                        </el-table-column>
                        <el-table-column prop="cancellingDate" label="合同截止" width="150">
                        </el-table-column>
                        <el-table-column prop="station" label="岗位" width="150">
                        </el-table-column>
                        <el-table-column prop="laborContractRenewal" label="劳动合同（已签署）" width="150">
                        </el-table-column>
                        <el-table-column prop="laborContract" label="劳动合同" width="150">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button @click="undock(scope.row)" type="text" size="small">移除</el-button>
                                <el-button type="text" size="small" @click="update(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { selectPersonnelAll } from '../api/personnel'
import { deletePersonnel } from '../api/personnel'
import PermissionLayer from '../components/PermissionLayer.vue';
export default {
    components: {
    PermissionLayer
  },
    data() {
        return {
            showPermissionLayer: '',
            activeName: 'first',
            input: '',
            newtable: [],
            tableData: [],
            customerId: '',
        }
    },
    mounted() {
        this.selectPersonnelAll()
         this.checkPermission(); // 组件挂载时检查权限
    },
    methods: {
        dialogTableVisible(){
            this.$router.push('/personnel/newpersonnel')
        },
        update(data){
            localStorage.setItem('personnel', JSON.stringify(data))
            this.$router.push('/personnel/updatepersonnel')
        },
        undock(row) {
            let data = {
                customerId: row.customerId
            }
            deletePersonnel(data).then(res => {
                if (res.code == 200) {
                    this.$message({
                        type: 'info',
                        message: '移除成功'
                    });
                    this.selectPersonnelAll()
                } else {
                    this.$message({
                        type: 'error',
                        message: '移除失败'
                    });
                }
            }).catch(err => {
                console.log(res) 
        }).catch(err => {
            console.log(err)
        })
    },

        //根据name进行搜索搜索
        search() {
            let sou = document.getElementById('seainp').value;
            this.newtable = []
            console.log('搜索功能' + sou)
            this.tableData.forEach(name => {
                if (sou == name.name) {
                    console.log(name.name)
                    // this.newtable = []
                    this.newtable.push(name)
                } else {
                    console.log('未找到')
                }
            });
            console.log(this.newtable)
        },
        //重置
        del() {
            this.newtable = this.tableData

        },
        selectPersonnelAll() {
            let department = {
                department: '采购部'
            }
            selectPersonnelAll(department).then(res => {
                if(res.code == 200){
                    this.showPermissionLayer = false;
                    console.log(res)
                    this.tableData = res.result
                    this.newtable = this.tableData
                }else{
                     this.showPermissionLayer = true;
                }
                
            }).catch(err => {
                console.log(err)    
            })
        }
    }
}
</script>

<style>
.el-table .warning-row {
    background: rgb(248, 248, 249);
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>